@charset "UTF-8";
@bgcolor: #2a3542;
@whitecolor: #FFFFFF;
@greycolor: #A3A3A3;
//登录
.cms-login{
    background: @bgcolor;
    height: calc(100vh);
    overflow: hidden;
    .cms-login-form{
        width: 380px;
        padding-top: calc(100vh - 100vh*0.75);
        margin: auto;
    }
    .cms-login-title{
        color: @whitecolor;line-height: 35px;
        span{
            font-size: 16px;
            font-weight: 700;margin-right: 10px;
        }
    }
    .cms-login-note,.refresh-captcha{
        color: @greycolor;font-size: 12px;margin-bottom: 25px;
    }
    .cms-login-captcha{
        height: 40px;float: right;cursor: pointer;border-radius: 4px;
    }
    .cms-login-btn{
        width: 100%;font-size: 16px;
    }
}
//菜单
.cms-menu{
    width: 180px;
    overflow: hidden;
    height: 100%;
    position: fixed;
    left:0;
    background: @bgcolor;
}
.cms-menu.applet{
    width: 150px;
}
//头部
.cms-header{
    background: @bgcolor;
    width: 100%;height: 65px;line-height: 65px;
    top:0;right: 0;overflow: hidden;z-index: 2000;
    position: fixed;
    .cms-header-logo{
        float:left;text-align: center;width: 180px;
        img{
            width: 140px;position: relative;top:12px;
        }
    }
    .cms-header-breadcrumb{
        float:left;margin-left: 15px;
    }
    .cms-header-user{
        padding-right: 15px;
        float:right;
        .user-menu{
            color: @whitecolor;
        }
    }
}
//布局
.cms-main{
    padding-top: 65px;
    .el-container{
        margin-left: 180px;
        position: relative;
    }
    .el-container.applet{
        margin-left: 150px;
        position: relative;
    }
    .cms-content{
        min-height: calc(100vh - 125px);
        .cms-btn-group{
            margin-bottom: 10px;
        }
        .cms-search-group{
            margin-bottom: 10px;
            display: inline-block;
            width: 100%;
            float: right;
            text-align: right;
            .cms-search-item{
                float: right;
                margin-left: 10px;
            }
        }
    }
    .cms-access{
        p{
            font-size: 16px;padding-left: 15px;line-height: 35px;
        }
        .el-form-item {
            margin-bottom: 0px;
        }
        .cms-access-label{
            float: left;margin:0 15px;cursor: pointer;
        }
        .el-checkbox+.el-checkbox {
            margin-left: 20px;
        }
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        cursor: pointer;
        border-radius: 50%;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .back-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        cursor: pointer;
        overflow: hidden;
    }
    .back-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon,.back-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 128px;
        height: 128px;
        line-height: 128px;
        text-align: center;
    }
    .avatar,.back {
        width: 128px;
        height: 128px;
        display: block;
    }
}
//分页
.cms-pagination{
    text-align: right;width: 100%;height: 60px;line-height: 70px;
    .cms-pagination-total{
        float: left;
        font-size: 14px;
        em{
            color: red;font-weight: 700;
        }
    }
}
//尾部
.cms-footer{
    text-align: center;height: 45px;line-height: 45px;
}

//路由过渡动画
.slide-fade-enter-active {
    transition: all .3s ease;
}
.slide-fade-leave-active {
    transition: all .5s ease-in-out;
}

.slide-fade-leave-to {
    opacity: 0;
    -webkit-transform: translate(0, 8%);
    transform: translate(0, 8%);

}
.slide-fade-enter{
    opacity: 0;
    -webkit-transform: translate(0, -5%);
    transform: translate(0, -5%);
}
//丝带
.ribbon {
    position: relative;
    color: white;
}
.ribbon6 {
    text-align: center;
    width: 40px;
    font-size: 13px;
    height: 20px;
    line-height: 28px;
    position: absolute;
    top: -2px;
    left: -13px;
    z-index: 2;
    overflow: hidden;
    transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    box-shadow:0 0 0 3px red,  0px 21px 5px -18px rgba(0,0,0,0.6);
    background: red;
}
